<template>
  <h1>展示reactive的数据</h1>
  <p>购车人姓名:{{ user.name }}</p>
  <p>购车人年龄:{{ user.age }}</p>
  <hr />
  <p>购买车辆品牌:{{ user.car.brand }}</p>
  <p>购买车辆所花金额:{{ user.car.price }}</p>

  <hr />
  <button @click="addAge">添加年龄上线</button>
  &nbsp;
  <button @click="updateUser">修改名字</button>
  &nbsp;
  <button @click="user.car.price += 1000">修改价格</button>
</template>

<script>
import { reactive } from "@vue/reactivity";
export default {
  name: "HelloWorld",
  setup() {
    let user = reactive({
      name: "张三",
      age: 30,
      car: {
        brand: "奥迪q5",
        price: 300000,
      },
    });

    // 添加购新车年龄上限
    function addAge() {
      // 此时 没有给user.age 添加 ref()绑定
      // 但是数据动态渲染了 说明容reactive 能将复杂数据内省中的属性值全部动态渲染
      user.age += 1;
    }

    // 更改姓名
    function updateUser() {
      user.name += "@";
    }

    return {
      user,
      addAge,
      updateUser,
    };
  },
};
</script>

<style>
</style>